<template>
    <el-dialog v-model="visible" title="出差申请审批" :close-on-press-escape="false" @open="" @closed="resetForm" width="32%">
        <el-form :model="auditResult" :rules="rule" label-suffix="：" label-width="100px" label-position="left" ref="formRef">
            <el-form-item label="任务编号" prop="taskId" style="display: none">
                <el-input v-model="auditResult.taskId"/>
            </el-form-item>
            <el-form-item label="审批结果" prop="approved">
                <el-radio-group v-model="auditResult.approved">
                    <el-radio :label="true" border>通过</el-radio>
                    <el-radio :label="false" border>不通过</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="回复" prop="reply" v-show="auditResult.approved===false">
                <el-input v-model="auditResult.reply" type="textarea" :rows="2" placeholder="请输入回复内容"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible=false">取消</el-button>
            <el-button @click="submit" type="primary">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {ElLoading, ElMessage} from "element-plus";
import {auditEvection} from "../../../../network/process/evection-process";

export default {
    name: "EvectionTaskHandle",
    emits: ['refresh-data'],
    setup(props,{emit}){
        const visible = ref(false);
        const formRef = ref(null);
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const validateReply = (rule,value,callback)=>{
            if((!form.auditResult.approved) && (value === null || value === '')){
                callback(new Error('请输入回复内容！'));
            }
            callback();
        }
        const form = reactive({
            auditResult: {
                taskId: null,
                approved: null,
                reply: null,
            },
            rule: {
                taskId: [
                    {required: true,message: '请选择任务编号',trigger: 'blur'}
                ],
                approved: [
                    {required: true,message: '请选择审批结果',trigger: 'blur'}
                ],
                reply: [
                    {validator: validateReply,trigger: 'blur'},
                ]
            },
            submit(){
                formRef.value.validate((valid)=>{
                    if(valid){
                        // console.log('审批通过form：',form.auditResult);
                        let loading = ElLoading.service({
                            text: '正在提交审批结果...',
                            lock: true
                        })
                        auditEvection(form.auditResult).then(vo=>{
                            loading.close();
                            globalProperties.$response.handle({
                                data: vo,
                                success: '处理成功',
                                successFn: ()=>{
                                    emit('refresh-data');
                                    visible.value = false;
                                },
                                error: '处理失败'
                            })
                        })
                    }else{
                        ElMessage.error('请先完善审批内容')
                    }
                })
            },
            resetForm(){
                formRef.value.clearValidate();
                formRef.value.resetFields();
            }
        })

        return {
            visible,
            formRef,
            ...toRefs(form)
        }
    },
    data(){
        return{
            task: {

            }
        }
    }
}
</script>

<style scoped>
</style>
<style>
.el-dialog__body {
    padding-bottom: 0;
}
</style>